#sidemenu-right-range{width:100px;position:fixed; z-index:0; right:0px; top:0px; bottom:0px;}
#sidemenu-left-range{width:150px;position:fixed; z-index:0; left:0px; top:0px; bottom:0px;}
#sidemenu-left,#sidemenu-right{position:fixed; width:200px; top:0px; bottom:0px; overflow:auto; background-color:#EFEFEF;  color:#333; z-index:9999;  }
#sidemenu-left{left:-200px;}
#sidemenu-right{right:-200px;}
#sidemenu-left-close,#sidemenu-right-close{position:absolute; text-align:center; line-height:30px; cursor:pointer; top:1px;color:#333; width:30px; height:30px;}
#sidemenu-left-close{right:1px;}
#sidemenu-right-close{right:1px;}
.sidemenu-list{ padding:10px; padding-top: 30px;}
.sidemenu-list .hd{height:40px; line-height:40px; font-size:16px; font-weight:600; color:#333;}
.sidemenu-list .item,.sidemenu-list .item a{height:40px; display:block; line-height:40px; color:#333;}
.sidemenu-list .item{border-bottom:1px solid #ccc;}


.animated {
  -webkit-animation-duration: 0.6s;
          animation-duration: 0.6s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}

.animated.infinite {
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}

.animated.hinge {
  -webkit-animation-duration: 1.5s;
          animation-duration: 1.5s;
}

@-webkit-keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
            transform: translate3d(-100%, 0, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

@keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
            transform: translate3d(-100%, 0, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

.fadeInLeft {
  -webkit-animation-name: fadeInLeft;
          animation-name: fadeInLeft;
}

@-webkit-keyframes fadeOutLeft {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
            transform: translate3d(-100%, 0, 0);
  }
}

@keyframes fadeOutLeft {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
            transform: translate3d(-100%, 0, 0);
  }
}

.fadeOutLeft {
  -webkit-animation-name: fadeOutLeft;
          animation-name: fadeOutLeft;
}

@-webkit-keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
            transform: translate3d(100%, 0, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
            transform: translate3d(100%, 0, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

.fadeInRight {
  -webkit-animation-name: fadeInRight;
          animation-name: fadeInRight;
}

@-webkit-keyframes fadeOutRight {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
            transform: translate3d(100%, 0, 0);
  }
}

@keyframes fadeOutRight {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
            transform: translate3d(100%, 0, 0);
  }
}

.fadeOutRight {
  -webkit-animation-name: fadeOutRight;
          animation-name: fadeOutRight;
}
